<template>
  <search-list
    :api-url="url.SaleOrderList"
    :option="searchOpt"
    :itemPerRow="8"
    :beforeQuery="beforeQuery"
    @getSearchData="getSearchData"
  >
    <el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
    <el-table-column
      prop="createdAt"
      label="交易时间"
      show-overflow-tooltip
      align="center"
    ></el-table-column>
    <el-table-column
      prop="orderId"
      label="订单号"
      show-overflow-tooltip
      align="center"
    ></el-table-column>
    <el-table-column
      prop="nickname"
      label="购买人"
      show-overflow-tooltip
      align="center"
    ></el-table-column>
    <el-table-column
      prop="phone"
      label="购买人手机号"
      show-overflow-tooltip
      align="center"
    ></el-table-column>
    <el-table-column label="推广员" show-overflow-tooltip align="center">
      <template #="scope">
        <img v-if="scope.row.saleAvatar" :src="scope.row.saleAvatar" class="list-img" alt="" />
        {{ scope.row.saleNickname }}
      </template>
    </el-table-column>
    <el-table-column
      prop="saleUsername"
      label="推广员姓名"
      show-overflow-tooltip
      align="center"
    ></el-table-column>
    <el-table-column prop="level" label="分佣类型" show-overflow-tooltip align="center">
      <template #header>
        <el-tooltip
          class="item"
          effect="dark"
          content="直接分佣：成功推广课程或有课VIP产生购买时，使用直接分佣比例进行分佣； 间接分佣：该账号的下级推广员，成功推广产生购买时，使用间接分佣比例进行分佣"
          placement="top"
        >
          <span>
            分佣类型
            <i class="el-icon-question"></i>
          </span>
        </el-tooltip>
      </template>
      <template #="scope">{{ ['', '直接', '间接'][scope.row.level] }}</template>
    </el-table-column>
    <el-table-column
      prop="salePhone"
      label="推广员手机号"
      show-overflow-tooltip
      align="center"
    ></el-table-column>
    <el-table-column
      prop="productTitle"
      label="商品名称"
      show-overflow-tooltip
      align="center"
    ></el-table-column>
    <el-table-column prop="payAmount" label="交易金额" show-overflow-tooltip align="center">
      <template #="scope">{{ scope.row.payAmount }}元</template>
    </el-table-column>
    <el-table-column
      prop="salePercent"
      label="佣金比例"
      show-overflow-tooltip
      align="center"
    ></el-table-column>
    <el-table-column prop="saleAmount" label="佣金" show-overflow-tooltip align="center">
      <template #="scope">{{ scope.row.saleAmount }}元</template>
    </el-table-column>
    <el-table-column prop="status" label="状态" show-overflow-tooltip align="center">
      <template #="scope">{{ $selectFormat['orderStatusSl'](scope.row.status).label }}</template>
    </el-table-column>
    <template v-slot:btn-after class="btn-after">
      <el-button type="success" icon="el-icon-download" @click="exportList">导出Excel</el-button>
    </template>
  </search-list>
  <!-- 详情 -->
</template>
<script>
  import { getCurrentInstance, onMounted, reactive, ref, watch, computed } from 'vue';
  import { ElMessage } from 'element-plus';
  import dayjs from 'dayjs';
  export default {
    setup() {
      const {
        $url: url,
        $service: service,
        JSON_HEADER: JSON_HEADER,
        $selectFormat: selectFormat,
      } = getCurrentInstance().appContext.config.globalProperties;
      // data
      // 筛选
      const searchOpt = ref([
        {
          type: 'el-date-picker',
          name: 'startTime',
          label: '全部时间',
        },
        {
          type: 'el-input',
          name: 'saleNickname',
          label: '推广员昵称',
        },
        {
          type: 'el-input',
          name: 'saleUsername',
          label: '推广员姓名',
        },
        {
          type: 'el-input',
          name: 'salePhone',
          label: '推广员手机号',
        },
        {
          type: 'el-input',
          name: 'orderId',
          label: '订单号',
        },
        {
          type: 'el-input',
          name: 'nickname',
          label: '购买人名称',
        },
        {
          type: 'el-input',
          name: 'phone',
          label: '手机号',
        },
        {
          type: 'saleLevelSl',
          name: 'level',
          label: '推广类型',
        },
      ]);
      const state = reactive({
        // 筛选的数据
        searchData: [],
      });
      // methods
      // 导出列表
      const exportList = () => {
        service.SaleOrderDownload(state.searchData, { responseType: 'blob' }).then((res) => {
          var blob = new Blob([res], { type: 'application/vnd.ms-excel' });
          let url = window.URL.createObjectURL(blob);
          let el = document.createElement('a');
          document.body.appendChild(el);
          el.href = url;
          el.download = '分销订单列表' + '.xlsx';
          el.click();
          window.URL.revokeObjectURL(url);
        });
      };
      // 搜索之前
      const beforeQuery = ({ searchInfo }) => {
        // 这里就得处理element的坑(转格式)
        for (let key in searchInfo) {
          if (searchInfo[key] instanceof Date) {
            searchInfo[key] = dayjs(searchInfo.startTime).format('YYYY-MM-DD HH:mm:ss');
          }
        }
      };
      // 得到搜索数据
      const getSearchData = (val) => {
        state.searchData = val;
      };

      // life
      onMounted(() => {});
      return {
        url,
        service,
        JSON_HEADER,
        selectFormat,
        searchOpt,
        // data
        // methods
        exportList,
        beforeQuery,
        getSearchData,
      };
    },
  };
</script>
<style scoped>
  .list-img {
    width: 39px;
    height: 39px;
    border-radius: 50%;
    vertical-align: middle;
  }
</style>
